<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="subject">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
  </div>
  <style>
    .subject {
      --subject_radius: 90px;
      --circle_num: 30;
      --angle: calc(360deg / var(--circle_num));

      --animation-duration: 1.5s;
      position: relative;
      width: calc(var(--subject_radius) * 2);
      height: calc(var(--subject_radius) * 2);
      /* border-radius: 50%;
      border: 1px solid black; */

      padding: 30px;
      /* background-color: red; */

      .section {
        --circle_radius: 5px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: calc(var(--circle_radius) * -1);
        margin-left: calc(var(--circle_radius) * -1);
        width: calc(var(--circle_radius) * 2);
        height: calc(var(--circle_radius) * 2);

        perspective: 150px;
        transform-style: preserve-3d;
        
        &::before, &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        &::after {
          background-color: gray;
          top: 100%;
          animation: moveWhite var(--animation-duration) infinite;
        }
        &::before {
          background-color: black;
          top: -100%;
          animation: moveBlack var(--animation-duration) infinite;
        }
      }

      .section:nth-child(1) {
        transform: rotate(calc(var(--angle) * 1)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -1);
        }
      }
      .section:nth-child(2) {
        transform: rotate(calc(var(--angle) * 2)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -2);
        }
      }
      .section:nth-child(3) {
        transform: rotate(calc(var(--angle) * 3)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -3);
        }
      }
      .section:nth-child(4) {
        transform: rotate(calc(var(--angle) * 4)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -4);
        }
      }
      .section:nth-child(5) {
        transform: rotate(calc(var(--angle) * 5)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -5);
        }
      }
      .section:nth-child(6) {
        transform: rotate(calc(var(--angle) * 6)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -6);
        }
      }
      .section:nth-child(7) {
        transform: rotate(calc(var(--angle) * 7)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -7);
        }
      }
      .section:nth-child(8) {
        transform: rotate(calc(var(--angle) * 8)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -8);
        }
      }
      .section:nth-child(9) {
        transform: rotate(calc(var(--angle) * 9)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -9);
        }
      }
      .section:nth-child(10) {
        transform: rotate(calc(var(--angle) * 10)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -10);
        }
      }
      .section:nth-child(11) {
        transform: rotate(calc(var(--angle) * 11)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -11);
        }
      }
      .section:nth-child(12) {
        transform: rotate(calc(var(--angle) * 12)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -12);
        }
      }
      .section:nth-child(13) {
        transform: rotate(calc(var(--angle) * 13)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -13);
        }
      }
      .section:nth-child(14) {
        transform: rotate(calc(var(--angle) * 14)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -14);
        }
      }
      .section:nth-child(15) {
        transform: rotate(calc(var(--angle) * 15)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -15);
        }
      }
      .section:nth-child(16) {
        transform: rotate(calc(var(--angle) * 16)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -16);
        }
      }
      .section:nth-child(17) {
        transform: rotate(calc(var(--angle) * 17)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -17);
        }
      }
      .section:nth-child(18) {
        transform: rotate(calc(var(--angle) * 18)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -18);
        }
      }
      .section:nth-child(19) {
        transform: rotate(calc(var(--angle) * 19)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -19);
        }
      }
      .section:nth-child(20) {
        transform: rotate(calc(var(--angle) * 20)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -20);
        }
      }
      .section:nth-child(21) {
        transform: rotate(calc(var(--angle) * 21)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -21);
        }
      }
      .section:nth-child(22) {
        transform: rotate(calc(var(--angle) * 22)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -22);
        }
      }
      .section:nth-child(23) {
        transform: rotate(calc(var(--angle) * 23)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -23);
        }
      }
      .section:nth-child(24) {
        transform: rotate(calc(var(--angle) * 24)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -24);
        }
      }
      .section:nth-child(25) {
        transform: rotate(calc(var(--angle) * 25)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -25);
        }
      }
      .section:nth-child(26) {
        transform: rotate(calc(var(--angle) * 26)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -26);
        }
      }
      .section:nth-child(27) {
        transform: rotate(calc(var(--angle) * 27)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -27);
        }
      }
      .section:nth-child(28) {
        transform: rotate(calc(var(--angle) * 28)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -28);
        }
      }
      .section:nth-child(29) {
        transform: rotate(calc(var(--angle) * 29)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -29);
        }
      }
      .section:nth-child(30) {
        transform: rotate(calc(var(--angle) * 30)) translateY(calc(var(--subject_radius) * -1));
        &::after,&::before {
          animation-delay: calc(var(--animation-duration) / var(--circle_num) * 3 * -30);
        }
      }
    }
    @keyframes moveBlack {
      0% {
        animation-timing-function: ease-in;
      }
      25% {
        transform: translate3d(0, 100%, var(--circle_radius));
        animation-timing-function: ease-out;
      }
      50% {
        transform: translate3d(0, 200%, 0);
      }
      75% {
        transform: translate3d(0, 100%, calc(var(--circle_radius) * -1));
        animation-timing-function: ease-out;
      }
    }
    @keyframes moveWhite {
      0% {
        animation-timing-function: ease-in;
      }
      25% {
        transform: translate3d(0, -100%, calc(var(--circle_radius) * -1));
        animation-timing-function: ease-out;
      }
      50% {
        transform: translate3d(0, -200%, 0);
      }
      75% {
        transform: translate3d(0, -100%, var(--circle_radius));
        animation-timing-function: ease-out;
      }
    }
  </style>
</body>

</html>